<template>
    <div class="rightView">
        <!-- 指标范围 -->
        <div class="normalzb">
            <div class="header">
                <p>正常指标范围</p>
            </div>
            <div class="normalList">
                <div class="images">
                    <img src="../../../images/NH4+.png" alt="">
                    <img src="../../../images/N2O3.png" alt="">
                    <img src="../../../images/H3PO4.png" alt="">
                </div>
                <div class="normalTitle">
                    <p v-for="item in zbfwTable" :key="item.id">{{ item.itemName }}:</p>
                </div>
                <div class="normalBox">
                    <p v-for="item in zbfwTable" :key="item.id">{{ item.itemLowerLimit }}-{{ item.itemUpperLimit }}</p>
                </div>
                <div style=" height: 100%;
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 12px;
            color: #FFFFFF;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;">
                    <p>mg/L</p>
                    <p>mg/L</p>
                    <p>mg/L</p>
                </div>
            </div>
        </div>
        <!-- 水质检测 -->
        <div class="waterList">
            <div class="header">
                <p>水质检测列表</p>
                <div style="display:flex; justify-content: space-around;width:50%;">
                    <el-select v-model="processAttr" placeholder="类型" @change="handleProcessAttrChange">
                        <el-option v-for="item in AttrOptions" :key="item.value" :label="item.label"
                            :value="item.label">
                        </el-option>
                    </el-select>
                    <el-select ref="poorNoSelect" v-model="poorNo" placeholder="池号">
                        <el-option v-for="item in PoorNoOptions" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="waterBox">
                <div class="waterTltie">
                    <p style="width:15%">属性</p>
                    <p style="width:20%">编号</p>
                    <p style="width:20%">执行时刻</p>
                    <p style="width:15%">氨氮</p>
                    <p style="width:15%">硝氮</p>
                    <p style="width:15%">磷酸盐</p>
                </div>
                <div class="boxList" v-if="showTableAdecharts">
                    <div class="boxListText" v-for="item in table1" :key="item.id">
                        <p style="width:15%">{{ item.poolType }}</p>
                        <p style="width:20%">{{ item.poolNo }}</p>
                        <p style="width:20%">{{ item.execution_time }}</p>
                        <p style="width:15%">{{ item.adValue }}</p>
                        <p style="width:15%">{{ item.xdValue }}</p>
                        <p style="width:15%">{{ item.lsyValue }}</p>
                    </div>
                </div>
                <div class="boxList" style=" display: flex;justify-content: center;align-items: center;" v-if="showTableAdecharts === false">
                    <p style="color:#FFFFFF;font-size: 14px;">暂无数据</p>
                </div>
            </div>
        </div>
        <!-- 数据统计 -->
        <div class="datastatistics">
            <div class="header">
                <p>数据统计</p>
            </div>
            <div class="EchartsBox">
                <div class="echarts" id="echarts" v-if="showTableAdecharts"></div>
                <div v-if="showTableAdecharts === false">暂无数据</div>
            </div>
        </div>
    </div>
</template>
<script>

import * as echarts from "echarts";
import { getCheckList, GetAttrData, GetPoorNoData, GetChkReports } from '@/api/cyRobot/home'

let myChart;

export default {
    name: 'RightView',
    data() {
        return {
            showTableAdecharts: true,
            timer: null,
            //指标范围
            zbfwTable: [],
            queryParams: {
                robotId: localStorage.getItem('robotId') || '',
                poolType: '',
                poolNo: ''
            },
            table1: [],
            //工艺属性
            AttrArry: [],
            AttrOptions: [],
            processAttr: '',
            //池体编号
            PoorNoArry: [],
            PoorNoOptions: [],
            poorNo: '',
            xAxisData: [],
            adValue: [],
            xdValue: [],
            lsyValue: [],
            dataList: []
        }
    },
    created() {
        this.ChkReports()
        this.CheckList()
    },
    mounted() {
        this.CheckList()
        this.AttrData()
        this.ChkReports()
        //为'池号'下拉添加监听
        this.$refs.poorNoSelect.$on('change', (newValue) => {
            this.updatePoolNo(newValue)
        })
    },
    methods: {
        //获取指标范围列表
        CheckList() {
            getCheckList().then(response => {
                this.zbfwTable = response.rows
            })
        },
        //获取检测列表
        ChkReports() {
            GetChkReports(this.queryParams).then(response => {
                if (response.code === 200) {
                    this.table1 = response.rows
                    this.xAxisData = this.table1.map(item => item.execution_time)
                    this.adValue = this.table1.map(item => item.adValue)
                    this.xdValue = this.table1.map(item => item.xdValue)
                    this.lsyValue = this.table1.map(item => item.lsyValue)
                    this.dataList = [
                        {
                            name: '氨氮',
                            value: this.adValue
                        },
                        {
                            name: '硝氮',
                            value: this.xdValue
                        },
                        {
                            name: '磷酸盐',
                            value: this.lsyValue
                        },
                    ]
                    if(response.rows !== [] && response.rows.length !== 0){
                        this.myEcharts()
                        this.showTableAdecharts = true
                    }else{
                        this.showTableAdecharts = false
                    }
                }

                
            })
        },
        // 处理工艺属性变化
        handleProcessAttrChange(value) {
            //获取池体编号------参数是工艺属性  
            GetPoorNoData({ processAttr: value }).then(response => {
                this.PoorNoArry = response.data
                this.PoorNoOptions = this.PoorNoArry.map((item, index) => {
                    return { value: index, label: item }
                })
                //设置默认的poolNo为顶一个选项
                this.queryParams.poolNo = this.PoorNoOptions[0].label
            }).catch(error => {
                console.error(error)
            })
            //更新queryParams中的poolType
            this.queryParams.poolType = value
        },
        // 当 poorNo 的值发生变化时更新 queryParams 中的 poolNo
        updatePoolNo(value) {
            // 找到对应的选项并获取 label
            const selectedOption = this.PoorNoOptions.find(option => option.value === value);
            if (selectedOption) {
                this.queryParams.poolNo = selectedOption.label
                // 刷新列表
                this.ChkReports()
            }
        },
        //获取工艺属性
        AttrData() {
            GetAttrData().then(response => {
                this.AttrArry = response.data
                this.AttrOptions = this.AttrArry.map((item, index) => {
                    return {
                        value: index,
                        label: item
                    }
                })
            })
        },
        myEcharts() {
            const symbol = [
                ""
                , ""
                , ""
            ]
            const color = [
                [
                    'rgba(0, 222, 255, 0)',
                    'rgba(0, 222, 255, 0.77)',
                    'rgba(0, 222, 255, 1)',
                    'rgb(6, 135, 188)',
                ],
                [
                    'rgba(255, 202, 0, 0)',
                    'rgba(255, 202, 0, 0.78)',
                    'rgba(255, 202, 0, 1)',
                    'rgb(135, 134, 60)',
                ],
                [
                    'rgba(0, 255, 177, 0)',
                    'rgba(0, 255, 177, 0.74)',
                    'rgba(0, 255, 177, 1)',
                    'rgb(15, 155, 143)',
                ],
            ]
            var seriesData = (this.dataList || []).map((item, index) => {
                return {
                    name: item.name || '',
                    type: 'line',
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: color[index][1], // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: color[index][0], // 100% 处的颜色
                                },
                            ],
                            global: false, // 缺省为 false
                        },
                        // opacity: 0.5,
                    },
                    showSymbol: false,
                    symbolSize: 14,
                    symbol: 'circle',
                    //拐点球配置
                    itemStyle: {
                        normal: {
                            color: color[index][2],
                            shadowColor: color[index][2],
                            shadowBlur: 10,
                        },
                    },
                    lineStyle: {
                        normal: {
                            color: color[index][2],
                            width: 1,
                        },
                    },

                    data: item.value || [],
                };
            });
            const option = {
                grid: {
                    left: '10',
                    right: '14',
                    bottom: '6',
                    top: '28',
                    containLabel: true,
                },
                //图例
                legend: {
                    data: [{ name: this.dataList[0] && this.dataList[0].name, icon: `image://${symbol[0]}` }, { name: this.dataList[1] && this.dataList[1].name, icon: `image://${symbol[1]}` }, { name: this.dataList[2] && this.dataList[2].name, icon: `image://${symbol[2]}` }],
                    show: true,
                    top: 4,
                    right: 80,
                    selectedMode: false,
                    textStyle: {
                        color: '#6EC0FF',
                        fontSize: 12,
                        lineHeight: 8,
                    },
                    itemStyle: {
                        // borderCap: 'butt',
                    },
                    itemWidth: 22,
                    itemHeight: 12,
                    itemGap: 12,
                },
                xAxis: {
                    type: 'category',
                    data: this.xAxisData,
                    boundaryGap: false,
                    axisTick: { show: false },
                    //坐标框线
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#3891FF',
                            width: 2,
                            type: 'solid',
                            opacity: 0.4,
                        },
                    },

                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#3891FF',
                            width: 2,
                            type: 'solid',
                            opacity: 0.2,
                        },
                    },
                    axisLabel: {
                        lineHeight: 10,
                        interval: 0,
                        margin: 10,
                        textStyle: {
                            color: '#9EEAFF',
                            fontSize: 14,
                            top: 10,
                            fontFamily: 'Microsoft YaHei',
                        },
                    },
                },
                yAxis: {
                    // type: 'value',
                    axisTick: { show: false }, //刻度
                    boundaryGap: true,
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#3891FF',
                            width: 2,
                            type: 'solid',
                            opacity: 0.2,
                        },
                    },
                    axisLabel: {
                        lineHeight: 10,
                        interval: 0,
                        margin: 10,
                        show: true,
                        color: '#9EEAFF',
                        fontSize: 14,
                        // formatter: '{value}',
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#3891FF',
                            width: 2,
                            type: 'solid',
                            opacity: 0.4,
                        },
                    },
                },
                series: seriesData,
            };
            myChart = echarts.init(document.getElementById("echarts"))
            myChart.setOption(option)
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
                if (myChart != null) myChart.resize();
            });
        }
    },
    beforeDestroy() {
        //if (this.timer) { clearInterval(this.timer); }
    }
}
</script>
<style lang="scss" scoped>
* {
    padding: 0;
    margin: 0;
}

.boxList::-webkit-scrollbar {
    display: none;
    /* 隐藏滚动条（仅适用于webkit内核的浏览器，如Chrome、Safari） */
}

.rightView {
    width: 30%;
    height: calc(100vh - 40px - 50px);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    //指标范围
    .normalzb {
        width: 98%;
        height: 22%;

        .header {
            width: 98%;
            height: 35px;
            background-image: url(../../../images/banner.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: flex;
            align-items: center;

            >p {
                font-family: PangMenZhengDao;
                font-weight: 400;
                font-size: 20px;
                color: #D9EAF5;
                margin-left: 20px;
            }
        }

        .normalList {
            width: 100%;
            height: 70%;
            display: flex;
            justify-content: center;
            align-items: center;

            .images {
                width: 20%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;

                >img {
                    width: 32px;
                    height: 24px;
                }
            }

            .normalTitle {
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                font-family: Source Han Sans CN;
                font-weight: bold;
                font-size: 12px;
                color: #FFFFFF;
            }

            .normalBox {
                width: 20%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;

                >p {
                    width: 65px;
                    height: 17px;
                    background: #11304F;
                    border-radius: 5px;
                    border: 1px solid #0486BB;
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    font-size: 12px;
                    color: #FFFFFF;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
    }

    //水质检测
    .waterList {
        width: 98%;
        height: 30%;

        //background-color: cornflowerblue;
        .header {
            width: 98%;
            height: 35px;
            background-image: url(../../../images/banner.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: flex;
            align-items: center;

            >p {
                width: 40%;
                font-family: PangMenZhengDao;
                font-weight: 400;
                font-size: 20px;
                color: #D9EAF5;
                margin-left: 20px;
            }

            ::v-deep.el-input {
                width: 90%;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            ::v-deep.el-input__inner {
                height: 30px;
                line-height: 30px;
                background: #11304F;
                border-radius: 5px;
                border: 1px solid #0486BB;
                font-size: 10px;
                padding: 0 12px;
                color: #FFFFFF;
            }

            ::v-deep.el-select .el-input .el-select__caret {
                font-size: 10px;
            }

            ::v-deep.el-input__icon {
                width: 10px;
                line-height: 30px;
            }

            ::v-deep .el-input--suffix .el-input__inner {
                padding-right: 12px;
            }
        }

        .waterBox {
            width: 100%;
            height: 80%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;

            //background-color: gold;
            .waterTltie {
                height: 30px;
                width: 100%;
                margin-top: 4px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-image: url(../../../images/liebiao.png);
                background-repeat: no-repeat;
                background-size: 100% 100%;

                >p {
                    height: 30px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    font-size: 14px;
                    color: #FFFFFF;
                }

            }

            .boxList {
                width: 100%;
                height: 74%;
                overflow-y: auto;

                //background-color: rgb(255, 202, 127);
                .boxListText {
                    height: 28px;
                    margin-top: 4px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    font-size: 12px;
                    color: #FFFFFF;
                    background-image: url(../../../images/tiao.png);
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    cursor: pointer;

                    >p {
                        width: 18%;
                        height: 28px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }
            }
        }
    }

    //数据统计
    .datastatistics {
        width: 98%;
        height: 48%;

        .header {
            width: 98%;
            height: 35px;
            background-image: url(../../../images/banner.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: flex;
            align-items: center;

            >p {
                font-family: PangMenZhengDao;
                font-weight: 400;
                font-size: 20px;
                color: #D9EAF5;
                margin-left: 20px;
            }
        }

        .EchartsBox {
            width: 100%;
            height: 85%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 14px;
            color: #FFFFFF;

            .echarts {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>